<template>
  <Teleport to="body">
    <Drawer
      :visible="visible"
      size="large"
      :buttonText="$t('header.logout')"
      :headerVisible="false"
      placement="top"
      @btn_click="btn_click"
      @close="drawerClose"
    >
      <NavCollapse
        ref="navCollapseRef"
        titleKey="name"
        :data="profileRoutes"
        lang
        router-link
        @click-item="drawerClose"
      ></NavCollapse>
    </Drawer>
  </Teleport>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { useMemberStore } from "../../../../../store";
import _profileRoutes from "~/data/profile_routes";
import { ref } from "vue";
const profileRoutes = ref(_profileRoutes);
type Props = {
  visible: boolean;
};
const route = useRoute();
const memberStore = useMemberStore();
const props = withDefaults(defineProps<Props>(), {
  visible: false,
});

const emits = defineEmits(["update:visible"]);
// 点击退出登录
let logoutPath = ["/profile", "/new_profile", "/member"];
const btn_click = () => {
  memberStore.clearProfile();
  logoutPath.forEach((item) => {
    if (route.path.includes(item)) {
      goto("/");
    }
  });
};

const navCollapseRef = ref();
const drawerClose = () => {
  emits("update:visible", false);
  //   navCollapseRef.value.closeAll();
};
</script>
<style scoped lang="less"></style>
